<template>
  <div class="bookrack">
    <div>

      <div>
        <van-nav-bar style="background-color:#FF9999;" title="书架">
          <template #left>
            <van-icon name="search" size="18" />
          </template>
          <template #right>
            <van-popover placement="bottom-end" v-model="showPopover" trigger="click" :actions="actions">
              <template #reference>
                <van-button style="background-color:#FF9999;border-color:#FF9999;" icon="ellipsis"></van-button>
              </template>
            </van-popover>
          </template>
        </van-nav-bar>
      </div>
      

      


      <div style="width:100%;margin:0 auto;border-radius:5px;">
        <van-notice-bar color="#FF9966" background="#F0F0F0" left-icon="volume-o" :scrollable="false">
          <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="3000"
            :show-indicators="false"
          >
            <van-swipe-item>万界竞技，开局我选张三丰。</van-swipe-item>
            <van-swipe-item>变成血族也要上学读书！</van-swipe-item>
            <van-swipe-item>我的师兄实在是太稳健了！</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
      </div>

      <div >

        <div class="header" style="margin-left:2%;margin-top:3%;">
          <div class="left" >
            <img class="img" mode="aspectFit" src="@/assets/icon/book.jpg">  
          </div>
          <div class="right">
            <p style="font-size:15px;color:black;">龙族V</p>
            <p style="font-size:10px;color:#D3D3D3;">作者：江南</p>
            <p style="font-size:10px;color:#D3D3D3;">龙族V：悼亡者的归来</p>
          </div>
        </div>

        <div class="header" style="margin-left:2%;margin-top:3%;">
          <div class="left" >
            <img class="img" mode="aspectFit" src="@/assets/icon/book.jpg">  
          </div>
          <div class="right">
            <p style="font-size:15px;color:black;">龙族V</p>
            <p style="font-size:10px;color:#D3D3D3;">作者：江南</p>
            <p style="font-size:10px;color:#D3D3D3;">龙族V：悼亡者的归来</p>
          </div>
        </div>
        
        <div class="header" style="margin-left:2%;margin-top:3%;">
          <div class="left" >
            <img class="img" mode="aspectFit" src="@/assets/icon/book.jpg">  
          </div>
          <div class="right">
            <p style="font-size:15px;color:black;">龙族V</p>
            <p style="font-size:10px;color:#D3D3D3;">作者：江南</p>
            <p style="font-size:10px;color:#D3D3D3;">龙族V：悼亡者的归来</p>
          </div>
        </div>

      </div> 

      



    </div>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar.vue";
import Vue from "vue";
import { NavBar,Icon,NoticeBar,Swipe,SwipeItem,Popover,Button,SwipeCell,Card } from "vant";
export default {
  name: "Home",
  components: {
    Tabbar,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [NoticeBar.name]: NoticeBar,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Popover.name]: Popover,
    [Button.name]: Button,
    [SwipeCell.name]: SwipeCell,
    [Card.name]: Card,
    
  },
  data() {
    return {
      showPopover: false,
      actions: [
        { text: '批量管理', icon: 'passed' },
        { text: '书籍导入', icon: 'add-o' },
        { text: '时间排序', icon: 'underway-o' },
      ],
    };
  },




};
</script>

<style>
.notice-swipe {
    height: 50px;
    line-height: 50px;
  }
.goods-card {
    margin: 0;
    background-color: white;
    text-align: left;
    height: 120px;
    

  }
.delete-button {
    height: 100%;
  }
  
.header{
    width:100%;
    line-height: 15px;
    display: inline-block;
  }
.left{
    float:left;
    font-size: 16px;
    width:100px;
    height:85%;
  }
.right{
    float:left;
    /* right:10px; */
    /* width: 20px; */
    height:20px;
    margin-left:0;
    text-align:left;
  }
.img{
    width:75%;
    height:85%;
    border-radius: 7px;
  }

</style>



